<template>
  <div class="configDetail">
    <van-nav-bar
      :title="$route.meta.title"
      left-arrow
      :border="false"
      @click-left="clickLeft"
      @click-right="clickRight"
      class="nav-bar"
    >
      <template #right>
        <van-icon name="success" size="20" /><span
          style="color: #fff; font-size: 20px"
          >递交</span
        >
      </template>
    </van-nav-bar>
    <div class="content">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <van-tag plain type="primary" style="margin: 10px 10px 10px 20px"
          >基本信息</van-tag
        >
      </div>
      <van-row gutter="20" type="flex" align="center">
        <van-col span="24">
          <van-field
            readonly
            clickable
            label="检验信息"
            v-model="sampleName"
            placeholder="请选择"
            input-align="center"
            @click="showSamplePicker = true"
            class="select-record"
          />
        </van-col>
        <van-col span="12" class="readonly">
          <van-field v-model="m_user" name="m_user" label="校对人员：" />
        </van-col>
        <van-col span="12" class="readonly">
          <van-field v-model="m_date" name="m_date" label="校对日期：" />
        </van-col>
        <van-col span="24" class="readonly">
          <van-field v-model="m_info" name="m_info" label="校对内容：" />
        </van-col>
      </van-row>

      <van-tag plain type="primary" style="margin: 10px 0px 10px 20px"
        >检验项目</van-tag
      >

      <van-list
      
        :immediate-check="false"
        :offset="1"
        :finished="finished"
        finished-text="暂无数据"
        v-for="(v, i) in list"
        :key="i"
        type="flex"
      >
        <van-cell
          :title="v.attributeName"
          title-class="custom-title"
          value-class="custom-value"
          label-class="custom-label"
        >
          <template #label>
            <div
              style="
                display: flex;
                height: 50px;
                align-items: center;
                margin-bottom: 10px;
              "
              v-if="v.dataType == 'Varchar'"
            >
              检验结果：
              <van-field
                v-model="v.attributeValue"
                name="attributeValue"
                readonly
                placeholder="请选择"
                input-align="center"
                style="
                  height: 50px;
                  width: 300px;
                  box-sizing: border-box;
                  padding: 0;
                  margin-right: 10px;
                "
                @click="
                  {
                    varcharShow = true;
                    type = v.dataType;
                    attributeCode = v.attributeCode;
                  }
                "
              >
              </van-field>
            </div>

            <div
              style="
                display: flex;
                height: 50px;
                align-items: center;
                margin-bottom: 10px;
              "
              v-if="v.dataType == 'Bool'"
            >
              检验结果：
              <van-field
                v-model="boolText"
                name="attributeValue"
                readonly
                placeholder="请选择"
                input-align="center"
                style="
                  height: 50px;
                  width: 300px;
                  box-sizing: border-box;
                  padding: 0;
                  margin-right: 10px;
                "
                @click="
                  {
                    boolShow = true;
                    type = v.dataType;
                    attributeCode = v.attributeCode;
                  }
                "
              >
              </van-field>
            </div>

            <div
              style="
                display: flex;
                height: 50px;
                align-items: center;
                margin-bottom: 10px;
              "
              v-if="v.dataType == 'Date'"
            >
              检验结果：
              <van-field
                v-model="v.attributeValue"
                name="attributeValue"
                input-align="center"
                style="
                  height: 50px;
                  width: 300px;
                  box-sizing: border-box;
                  padding: 0;
                  margin-right: 10px;
                "
                @focus="
                  type = v.dataType;
                  attributeCode = v.attributeCode;
                "
                @input="dateChange"
              >
              </van-field>
            </div>

            <div
              style="
                display: flex;
                height: 50px;
                align-items: center;
                margin-bottom: 10px;
              "
              v-if="v.dataType == 'Float' && v.attributeList == null"
            >
              检验结果：
              <van-field
                v-model="v.floatType"
                name="attributeValue"
                readonly
                placeholder="请选择"
                input-align="center"
                style="
                  height: 50px;
                  width: 300px;
                  box-sizing: border-box;
                  padding: 0;
                  margin-right: 10px;
                "
                @click="
                  {
                    floatShow = true;
                    type = v.dataType;
                    hasMore = false;
                    attributeCode = v.attributeCode;
                  }
                "
              >
              </van-field>
              <van-field
                v-model="v.floatValue"
                name="attributeValue"
                input-align="center"
                style="
                  height: 50px;
                  width: 300px;
                  box-sizing: border-box;
                  padding: 0;
                  margin-right: 10px;
                "
                @focus="
                  type = v.dataType;
                  attributeCode = v.attributeCode;
                  hasMore = false;
                "
                @input="floatChange"
              >
              </van-field>
            </div>

            <div
              v-if="
                v.dataType == 'Float' &&
                v.attributeList &&
                v.attributeList.length > 0
              "
            >
              检验结果：
              <van-list v-for="(t, j) in v.attributeList" :key="j">
                <div style="display: flex; margin: 10px 0; padding-left: 70px">
                  <van-field
                    v-model="t.floatType"
                    name="attributeValue"
                    readonly
                    placeholder="请选择"
                    input-align="center"
                    style="
                      height: 50px;
                      width: 300px;
                      box-sizing: border-box;
                      padding: 0;
                      margin-right: 35px;
                    "
                    @click="
                      {
                        floatShow = true;
                        type = v.dataType;
                        hasMore = true;
                        moreAutoId = t.iautoid;
                        attributeCode = v.attributeCode;
                      }
                    "
                  >
                  </van-field>
                  <van-field
                    v-model="t.floatValue"
                    name="attributeValue"
                    input-align="center"
                    style="
                      height: 50px;
                      width: 300px;
                      box-sizing: border-box;
                      padding: 0;
                    "
                    @focus="
                      type = v.dataType;
                      attributeCode = v.attributeCode;
                      hasMore = true;
                      moreAutoId = t.iautoid;
                    "
                    @input="floatChange"
                  >
                  </van-field>
                </div>
              </van-list>
            </div>
            <div style="color: red" v-if="v.state == 1">
              检验标准：{{ v.attributeStandard }}
            </div>
            <div v-else>检验标准：{{ v.attributeStandard }}</div>
            <div>检验人员：{{ v.testUserName }}</div>
            <div style="display: flex" v-if="v.dataType == 'Varchar'">
              是否符合规定：
              <input
                type="radio"
                :name="v.attributeCode"
                :checked="v.state == 0"
                @click="v.state = 0"
              />
              是
              <input
                type="radio"
                :name="v.attributeCode"
                :checked="v.state == 1"
                @click="v.state = 1"
                style="margin-left: 20px"
              />
              否
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>

    <van-popup
      v-model="showSamplePicker"
      position="bottom"
      round
      :style="{ height: '50%' }"
      :lock-scroll="false"
    >
      <van-cascader
        v-model="sampleValue"
        :options="sampleArr"
        @close="showSamplePicker = false"
        @finish="onSampleFinish"
        :field-names="sampleNames"
      />
    </van-popup>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="userList"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup
      v-model="varcharShow"
      safe-area-inset-bottom
      close-on-popstate
      position="bottom"
      get-container="body"
      :style="{ height: '50%' }"
      round
      closeable
      close-icon="passed"
      style="padding-top: 60px"
      @close="onClose"
    >
      <div class="search-wapper">
        <van-search
          v-model="varcharValue"
          placeholder="请输入关键词"
          @input="debouncedInput"
        />

        <van-cell v-if="searchList.length < 1">暂无匹配项</van-cell>

        <van-cell-group v-else>
          <van-cell
            v-for="item in searchList"
            :key="item"
            :title="item"
            @click="handleCellClick(item)"
          />
        </van-cell-group>
      </div>
    </van-popup>

    <van-popup v-model="boolShow" round position="bottom">
      <van-picker
        show-toolbar
        :columns="boolList"
        @cancel="boolShow = false"
        @confirm="onBoolConfirm"
      />
    </van-popup>

    <van-popup v-model="floatShow" round position="bottom">
      <van-picker
        show-toolbar
        :columns="floatList"
        @cancel="floatShow = false"
        @confirm="onFloatConfirm"
      />
    </van-popup>
  </div>
</template>

<script type='text/ecmascript-6'>
import {
  NavBar,
  Icon,
  Cell,
  CellGroup,
  Button,
  Popup,
  Field,
  Calendar,
  Notify,
  Uploader,
  List,
  Tag,
  Picker,
  Dialog,
  Search,
  RadioGroup,
  Radio,
  cascader,
  Col,
  Row,
} from "vant";
import {} from "@/api/base";
import {
  getModifyBatchIdSelect,
  getCheckRecord,
  getModifyTestAttributes,
  GetDictionarySelect,
  saveModifyTest,
} from "@/api/check";
import { to } from "@/utils";
export default {
  name: "myCheckObject",
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [Notify.name]: Notify,
    [Uploader.name]: Uploader,
    [List.name]: List,
    [Tag.name]: Tag,
    [Picker.name]: Picker,
    [Dialog.name]: Dialog,
    [Search.name]: Search,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [cascader.name]: cascader,
    [Col.name]: Col,
    [Row.name]: Row,
  },
  data() {
    return {
      token: "",
      sampleName: "", //合并后检验样品
      showSamplePicker: false,
      sampleArr: [],
      sampleValue: "",
      sampleNames: {
        text: "name",
        value: "code",
      },
      loading: false,
      finished: false,
      list: [],
      userCode: "",
      userName: "",
      showPicker: false,
      userList: [],
      attributeValue: "",
      varcharShow: false,
      searchList: [],
      varcharValue: "",
      type: "",
      attributeCode: "",
      debouncedInput: null,
      boolShow: false,
      boolText: "",
      boolList: [
        { id: 1, text: "是" },
        { id: 2, text: "否" },
      ],
      // dateValue: "",
      // dateChange: null,
      floatShow: false,
      floatList: ["=", "未检出", "<", "≤", ">", "≥"],
      hasMore: false,
      floatChange: null,
      floatValue: "",
      moreAutoId: "",
      testID: "",
      m_user: "",
      m_date: "",
      m_info: "",
      radio: "1",
      radio1: "0",
      materialCode: "",
    };
  },
  watch: {},
  mounted() {
    this.token = localStorage.getItem("tokenKey");
    this.getSampleData();
    this.fetchSearchList();
    this.debouncedInput = this.debounce(this.getValue);
    this.floatChange = this.debounce(this.getFloatValue);
  },
  methods: {
    clickLeft() {
      this.$router.replace({ name: "home" });
    },
    clickRight() {
      var queryParams = {
        number: "46",
        testID: this.testID,
        materialCode: this.materialCode,
        checks: this.list,
        Token: this.token,
      };
      saveModifyTest(queryParams)
        .then((response) => {
          Notify({ type: "success", message: response.ErrorMsg });
          this.list = [];
          this.m_user = "";
          this.m_date = "";
          this.m_info = "";
          this.sampleName = ""; //合并后检验样品
          this.sampleValue = "";
          this.getSampleData();
        })
        .catch(() => {});
    },
    async getSampleData() {
      var that = this;
      var queryParams = {
        Token: this.token,
      };
      const [err, res] = await to(getModifyBatchIdSelect(queryParams));
      if (err) return;
      var result = res.Result;
      this.dowhile(result);
      this.sampleArr = result;
    },
    dowhile(b) {
      for (var i = 0; i < b.length; i++) {
        if (b[i].children && b[i].children.length > 0) {
          this.dowhile(b[i].children);
        } else {
          delete b[i].children;
        }
      }
    },
    onSampleFinish({ selectedOptions }) {
      this.showSamplePicker = false;
      var len = selectedOptions.length;
      var toDetail = selectedOptions[len - 1];
      this.sampleName = toDetail.name;
      this.materialCode = selectedOptions[len - 2].code;
      this.testID = toDetail.code;
      this.getDescript(toDetail.code);
      this.getItemList(toDetail.code);
    },
    getDescript(code) {
      var queryParams = {
        pageModel: { Token: this.token, Search: [code, "Checking"] },
      };
      getCheckRecord(queryParams)
        .then((response) => {
          var res = response.Result[0];
          if (!res) return false;
          this.m_user = res.userName;
          this.m_date = res.recordTime;
          this.m_info = res.recordMessage;
        })
        .catch(() => {});
    },
    getItemList(code, materialCode) {
      var queryParams = { Token: this.token, Search: [code] };
      getModifyTestAttributes(queryParams)
        .then((response) => {
          var result = response.Result;
          for (var i = 0; i < result.length; i++) {
            result[i].state = result[i].standardState;
          }
          this.list = result;
        })
        .catch(() => {});
    },
    onConfirm() {},
    async fetchSearchList() {
      const queryParams = {
        pageModel: {
          Token: this.token,
          Search: ["CheckMessage"],
        },
      };
      const [err, res] = await to(GetDictionarySelect(queryParams));
      if (err) return [];
      var result = res.Result;
      var spec = [];
      result.map((item) => {
        spec.push(item.text);
      });
      this.searchList = spec;
    },
    handleCellClick(value) {
      this.varcharValue = value;
      for (var i = 0; i < this.list.length; i++) {
        var el = this.list[i];
        if (this.type == "Varchar" && el.attributeCode == this.attributeCode) {
          el.attributeValue = value;
          this.varcharShow = false;
          return;
        }
      }
    },
    debounce(fn) {
      var that = this;
      var timer = null;
      return function () {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          fn();
          timer = null;
        }, 500);
      };
    },
    getValue() {
      for (var i = 0; i < this.list.length; i++) {
        var el = this.list[i];
        if (this.type == "Varchar" && el.attributeCode == this.attributeCode) {
          el.attributeValue = this.varcharValue;
          return;
        }
      }
    },
    onClose() {
      this.varcharShow = false;
    },
    onBoolConfirm(value) {
      var boolValue = value.id;
      this.boolText = value.text;
      for (var i = 0; i < this.list.length; i++) {
        var el = this.list[i];
        if (this.type == "Bool" && el.attributeCode == this.attributeCode) {
          el.attributeValue = boolValue;
          this.showPicker = false;
          return;
        }
      }
    },
    onFloatConfirm(value) {
      if (!this.hasMore) {
        for (var i = 0; i < this.list.length; i++) {
          var el = this.list[i];
          if (this.type == "Float" && el.attributeCode == this.attributeCode) {
            el.floatType = value;
            if (el.floatValue) {
              if (value != "=" && value != "未检出") {
                el.attributeValue = value + el.floatValue;
              } else {
                el.attributeValue = el.floatValue;
              }
            }
            this.floatShow = false;
            return;
          }
        }
      } else {
        for (var i = 0; i < this.list.length; i++) {
          var el = this.list[i];
          if (this.type == "Float" && el.attributeCode == this.attributeCode) {
            var attr = el.attributeList;
            for (var j = 0; j < attr.length; j++) {
              if (this.moreAutoId == attr[j].iautoid) {
                attr[j].floatType = value;
                if (attr[j].floatValue) {
                  if (value != "=" && value != "未检出") {
                    attr[j].attributeValue = value + attr[j].floatValue;
                  } else {
                    attr[j].attributeValue = attr[j].floatValue;
                  }
                }
                this.floatShow = false;
                return;
              }
            }
          }
        }
      }
    },
    getFloatValue() {
      if (!this.hasMore) {
        for (var i = 0; i < this.list.length; i++) {
          var el = this.list[i];
          if (this.type == "Float" && el.attributeCode == this.attributeCode) {
            if (el.floatType) {
              if (el.floatType != "=" && el.floatType != "未检出") {
                el.attributeValue = el.floatType + el.floatValue;
              }
            } else {
              el.attributeValue = el.floatValue;
            }
            return;
          }
        }
      } else {
        for (var i = 0; i < this.list.length; i++) {
          var el = this.list[i];
          if (this.type == "Float" && el.attributeCode == this.attributeCode) {
            var attr = el.attributeList;
            for (var j = 0; j < attr.length; j++) {
              if (this.moreAutoId == attr[j].iautoid) {
                if (attr[j].floatType) {
                  if (
                    attr[j].floatType != "=" &&
                    attr[j].floatType != "未检出"
                  ) {
                    attr[j].attributeValue =
                      attr[j].floatType + attr[j].floatValue;
                  }
                } else {
                  attr[j].attributeValue = attr[j].floatValue;
                }
                return;
              }
            }
          }
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
input[name="attributeValue"] {
  border: 1px solid #ebedf0;
  height: 0.6rem;
  box-sizing: border-box;
}
.configDetail {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: hidden;
}
.content {
  height: calc(100% - 40px);
  overflow: auto;
}
.handleContent {
  width: 100%;
}
.van-col-style {
  font-size: 0.36rem;
  color: #000;
  text-align: left;
  padding-left: 0.2rem;
  margin-top: 0.2rem;
}
.van-cell {
  overflow: inherit;
}
input[type="radio"] {
  width: 12px;
  height: 12px;
}
/deep/input[name="m_user"] {
  text-align: center;
}
/deep/input[name="m_date"] {
  text-align: center;
}
/deep/input[name="m_info"] {
  text-align: center;
}
.readonly /deep/.van-field__body {
  background: #ddd;
}
/deep/.van-cell {
  padding: 0.2rem 0.4rem;
}
/deep/.van-field__body {
  border-radius: 2px !important;
  border: 1px solid #ddd;
}
/deep/.van-cell {
  font-size: 0.32rem;
}
/deep/.van-cascader__header {
  height: 1rem;
}
/deep/.van-cascader__tabs.van-tabs--line .van-tabs__wrap {
  height: 1rem;
}
.readonly /deep/.van-field__body {
  background: #ddd;
}
</style>